<%--
  Created by IntelliJ IDEA.
  User: 您的名字
  Version: 1.0
 --%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<html>
<head>
    <title>EasyUI CRUD 示例页面</title>
    <meta charset="UTF-8">
    <base href="<%=request.getContextPath()%>/">
    <!-- 引入 EasyUI 的默认主题样式 -->
    <link rel="stylesheet" type="text/css" href="static/js/easyui/themes/bootstrap/easyui.css">
    <!-- 引入 EasyUI 的图标样式 -->
    <link rel="stylesheet" type="text/css" href="static/js/easyui/themes/icon.css">
    <!-- 引入自定义的公共CSS -->
    <link rel="stylesheet" type="text/css" href="static/css/common.css"/>

    <link rel="stylesheet" type="text/css" href="static/js/bootstrap-5.3.0/css/fileinput.min.css"/>
    <script src="static/js/bootstrap-5.3.0/js/fileinput.min.js"></script>
    <script src="static/js/bootstrap-5.3.0/js/zh.min.js"></script>

    <!-- 引入 EasyUI 默认的 jQuery（无需单独引入 jQuery） -->
    <script src="static/js/easyui/jquery.min.js"></script>
    <!-- 引入 EasyUI 的核心 JS 文件 -->
    <script src="static/js/easyui/jquery.easyui.min.js"></script>
    <!-- 引入 EasyUI 的中文语言包 -->
    <script src="static/js/easyui/locale/easyui-lang-zh_CN.js"></script>
    <!-- 引入自定义的公共脚本 -->
    <script src="static/js/owner/common.js"></script>
    <!-- 引入自定义的公共脚本 -->
    <script src="static/js/owner/dataGrid.js"></script>
    <!-- 引入省市区的公共脚本 -->d/city_code.js"></script>
    <!-- 引入 moment.js 库，用于处理日期和时间 -->
    <script src="static/js/owner/moment.min.js"></script>
    <!-- daterangepicker 是一个日期范围选择插件，支持选择开始和结束日期 -->
    <link rel="stylesheet" href="static/css/daterangepicker.css">
    <!-- 引入 daterangepicker 的脚本文件 -->
    <script src="static/js/owner/daterangepicker.js"></script>
</head>
<style>
    /* 上传区域样式 */
    .upload-section {
        margin: 20px 0;
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 4px;
        background: #f8f9fa;
    }

    /* 预览图片尺寸限制 */
    .file-preview-image {
        max-height: 120px !important; /* 覆盖插件默认样式 */
        object-fit: cover; /* 2025年新增图片裁剪模式 */
    }

    /* 拖拽排序手柄样式 */
    .order-handle {
        position: absolute;
        right: 10px;
        top: 5px;
        z-index: 1;
        cursor: move; /* 显示可拖拽光标 */
        color: #666;
    }

    /* 主容器布局 */
    #tt { /* 适配EasyUI tabs容器 */
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    /* 表单行样式 */
    .form-row {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
        gap: 10px;
    }

    /*可以将每个表单项的标签和输入框放在同一个Flex容器中，使标签保持固定宽度，输入框自适应剩余空间*/
    .form-row label {
        flex: 0 0 100px; /* 固定标签宽度 */
        text-align: right;
    }

    /* 输入控件容器 */
    .input-container {
        flex: 1;
        min-width: 0; /* 防止内容溢出 */
    }

    /* 特殊行处理 */
    #previewContainer {
        display: none;
    }

    /* 按钮容器 */
    .button-group {
        display: flex;
        justify-content: flex-start;
        margin-top: auto; /* 底部对齐 */
        gap: 10px;
    }
</style>
<body>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="openTab()">选项卡</a>

<!-- 详细信息窗口 -->
<div id="tabWindow" class="easyui-window" data-options="closed:true">
    <div id="tt" class="easyui-tabs" style="width:100%;height:100%;">
        <div id="div" title="基本信息" data-options="iconCls:'icon-reload',closable:false" style="padding:20px;">
            <div class="form-row">
                <label>产品包名称:</label>
                <div class="input-container">
                    <input id="productName" name="productName" type="text" value=""/>
                </div>
            </div>
            <div class="form-row">
                <label>产品包图:</label>
                <div class="input-container">
                    <input id="file" class="easyui-filebox">
                    <div id="previewContainer">
                        <img id="previewImg" src="#" alt="图片预览" style="max-width: 200px; max-height: 150px;">
                    </div>
                </div>
            </div>
            <div class="form-row">
                <label>关联项目:</label>
                <div class="input-container">
                    <input id="project" name="project" class="easyui-combobox" data-options="
                            valueField:'id',textField:'text',
                            data:[
                                {id: '-1', text: '未入库'},
                                {id: '0', text: '未配置'},
                            ],
                            editable: false,
                            prompt: '请选择发货状态',
                            panelHeight:'auto'">
                </div>
            </div>
            <div class="form-row">
                <label>购买次数(次):</label>
                <div class="input-container">
                    <input id="buyCount" name="buyCount" type="text" value=""/>
                </div>
            </div>
            <div class="form-row">
                <label>产品包总金额:</label>
                <div class="input-container">
                    <input id="money" name="money" class="easyui-numberbox"/>
            </div>
        </div>
            <div class="button-group">
                <button onclick="nextTab()">下一步</button>
            </div>
        </div>
        <div title="设备详情" data-options="iconCls:'icon-reload',closable:false, disabled: true" style="padding:20px;">
            <div class="container">
                <h2 class="page-header">商品图片上传系统</h2>

                <!-- 缩略图上传区域 -->
                <div class="upload-section">
                    <h4><i class="glyphicon glyphicon-picture"></i> 缩略图上传（最多5张）</h4>
                    <input id="thumbnailUpload" type="file" multiple>
                </div>

                <!-- 详情图上传区域 -->
                <div class="upload-section">
                    <h4><i class="glyphicon glyphicon-film"></i> 详情图上传（最多10张）</h4>
                    <input id="detailUpload" type="file" multiple>
                </div>
            </div>

            <button onclick="lastTab()">上一步</button>
        </div>
    </div>
</div>
</body>

<!-- 定义页面脚本 -->
<script type="text/javascript">
    // 验证必填字段
    const validateRules = [
        { selector: '#productName', msg: '产品包名称不能为空' },
        { selector: '#file', type: 'filebox', msg: '图片不能为空' },
        { selector: '#project', type: 'combobox', msg: '请选择关联项目' },
        { selector: '#buyCount', regex: /^\d+$/, msg: '购买次数需为正整数' },
        { selector: '#money', type: 'numberbox', msg: '金额格式错误' }
    ];

    $(function () {
        $("#file").filebox({
            buttonText: '选择图片',
            accept: 'image/*',
            onChange: previewImage
        })
    })


    function previewImage() {
        const file = $("#file").filebox('files')[0];
        const preview = document.getElementById('previewImg');
        const container = document.getElementById('previewContainer');

        if (file && file.type.startsWith('image/')) {
            const reader = new FileReader();
            reader.onload = function (e) {
                preview.src = e.target.result;
                container.style.display = 'block';
            };
            reader.readAsDataURL(file);
        } else {
            container.style.display = 'none';
        }
    }
    // 打开详情窗口
    function openTab() {
        $('#tabWindow').window({
            title: '信息',
            width: 800,
            height: 600,
            modal: true,
            iconCls:'icon-save',
        }).window('open').window('center');
    }

    // 通用验证函数
    function validateForm(rules) {
        for (const rule of rules) {
            let value;
            if (rule.type  === 'combobox') {
                value = $(rule.selector).combobox('getValue');
            } else if (rule.type  === 'numberbox') {
                value = $(rule.selector).numberbox('getValue');
            } else if (rule.type  === 'filebox') {
                value = $(rule.selector).filebox('files')[0];
            } else {
                value = $(rule.selector).val();
            }

            if (
                (rule.regex  && !rule.regex.test(value))  ||
                (!rule.regex  && !value)
            ) {
                $.messager.alert(' 警告', rule.msg);
                return false;
            }
        }
        return true;
    }

    function nextTab() {
        if (!validateForm(validateRules)) return;

        const formData = new FormData();

        // 添加普通字段
        formData.append('productName',  $('#productName').val());
        formData.append('project',  $('#project').combobox('getValue'));
        formData.append('buyCount',  $('#buyCount').val());
        formData.append('money',  $('#money').numberbox('getValue'));

        // 添加文件对象
        const file = $('#file').filebox('files')[0];
        if (file) {
            formData.append('productImage',  file);
        }

        $.ajax({
            url: 'tabSave',
            data: formData,
            type: 'post',
            contentType: false,  // 必须设置
            processData: false,  // 必须设置
            dataType: 'json',
            success: function (data) {
                $.messager.show({
                    title: '提示',
                    msg: '保存成功！',
                    timeout: 3000, // 自动关闭时间，单位毫秒
                    showType: 'slide' // 显示动画类型，如 'slide', 'fade', 'show'
                });

                $('#tt').tabs('enableTab', '设备详情');
                $('#tt').tabs('select', '设备详情');
            },
            error: function () {

            }

        })
        // 或通过标题切换（推荐方式，避免动态索引变化）
        $('#tt').tabs('disableTab', '基本信息');
    }

    function lastTab() {
        $('#tt').tabs('enableTab', '基本信息');

        $("#tt").tabs('select', '基本信息');

        $('#tt').tabs('disableTab', '设备详情');
    }




    /**
     * 图片存储模块
     * 使用 localStorage 实现数据持久化
     */
    const imageStore = (() => {
        const STORAGE_KEY = 'imageUploadDemo2025'; // 存储键名

        return {
            // 获取指定类型图片
            get: (type) => {
                try {
                    const data = JSON.parse(localStorage.getItem(STORAGE_KEY)  || '{}');
                    return data[type] || [];
                } catch (e) {
                    console.error(' 本地存储读取失败:', e);
                    return [];
                }
            },

            // 保存指定类型图片
            save: (type, items) => {
                try {
                    const data = JSON.parse(localStorage.getItem(STORAGE_KEY)  || '{}');
                    data[type] = items;
                    localStorage.setItem(STORAGE_KEY,  JSON.stringify(data));
                } catch (e) {
                    console.error(' 本地存储写入失败:', e);
                }
            },

            // 清空所有存储（2025新增）
            clear: () => {
                localStorage.removeItem(STORAGE_KEY);
            }
        };
    })();

    /**
     * 文件处理模块
     */
    const fileHandler = {
        // 生成文件预览图
        createPreview: (file) => {
            return new Promise((resolve) => {
                const reader = new FileReader();
                reader.onload  = (e) => resolve(e.target.result);
                reader.readAsDataURL(file);
            });
        },

        // 生成唯一文件ID
        generateId: () => Date.now()  + '-' + Math.random().toString(36).substr(2,  9),

        // 文件验证（2025新增）
        validateFile: (file) => {
            const MAX_SIZE = 5 * 1024 * 1024; // 5MB限制
            if (file.size  > MAX_SIZE) {
                return { valid: false, message: '文件大小不能超过5MB' };
            }
            return { valid: true };
        }
    };

    /**
     * 初始化上传组件
     * @param {string} selector 选择器
     * @param {object} config 配置项
     */
    function initUploader(selector, config) {
        const { maxCount, type } = config;

        $(selector).fileinput({
            language: 'zh',      // 中文支持
            theme: 'fas',        // 2025新增图标库
            uploadAsync: false,  // 同步上传模式
            maxFileCount: maxCount,
            allowedFileTypes: ['image'],
            allowedFileExtensions: ['jpg', 'png', 'jpeg', 'webp'], // 2025新增webp支持
            showClose: false,
            validateInitialCount: true,

            // 布局模板定制
            layoutTemplates: {
                actionDelete: '',      // 隐藏删除按钮
                actionZoom: '',        // 隐藏放大按钮
                indicatorActions: '<div class="order-handle">{drag}</div>'
            },

            // 初始预览数据
            initialPreview: imageStore.get(type).map(img  => img.preview),
            initialPreviewConfig: imageStore.get(type).map(img  => ({
                caption: img.name,
                key: img.id,
                extra: { type }
            })),

            // 上传配置
            uploadUrl: '/dummy-upload', // 模拟上传地址
            uploadExtraData: { type },  // 附加数据
            fileActionSettings: {       // 2025新增操作设置
                showDrag: true,
                showRemove: false
            },

            // 文件验证（2025新增）
            filepreupload: (event, data) => {
                const validation = fileHandler.validateFile(data.files[0]);
                if (!validation.valid)  {
                    setTimeout(() => alert(validation.message),  10);
                    return false;
                }
            },

            // 上传完成处理
            fileuploaded: function(event, data) {
                const formData = new FormData();
                formData.append('files',  data.files[0]);
                formData.append('type',  type);


                $.ajax({
                    url: 'tabSave',
                    data: formData,
                    type: 'post',
                    contentType: false,  // 必须设置
                    processData: false,  // 必须设置
                    dataType: 'json',
                    success: function () {
                        $.messager.show({
                            title: '提示',
                            msg: '保存成功！',
                            timeout: 3000, // 自动关闭时间，单位毫秒
                            showType: 'slide' // 显示动画类型，如 'slide', 'fade', 'show'
                        });
                        // 更新前端预览
                        this.addPreview(data.data);
                    },
                })
            },

            // 文件删除处理
            fileremoved: function(event, id) {
                const items = imageStore.get(type).filter(item  => item.id  !== id);
                imageStore.save(type,  items);
            }
        }).on('filesorted', function(event, params) {
            // 处理拖拽排序
            const sortedItems = params.stack
                .map(id => imageStore.get(type).find(item  => item.id  === id))
                .filter(Boolean);
            imageStore.save(type,  sortedItems);
        });
    }

    // 初始化上传组件
    $(function() {
        // 缩略图上传器
        initUploader('#thumbnailUpload', {
            type: 'thumbnail',
            maxCount: 5
        });

        // 详情图上传器
        initUploader('#detailUpload', {
            type: 'detail',
            maxCount: 10
        });

        // 2025新增控制台提示
        console.log('%c 当前版本：1.2.0 (2025-02)',
            'color: #fff; background: #2c3e50; padding: 2px 5px;');
    });
</script>
</body>
</html>
